<template>
  <div>
    <Dog v-for="(item,i) in list" :key="i" 
    :Url="item.dogImgUrl"
    :dogName="item.dogName"
    @clickDog='loveDog'
     />
    <p>您喜欢的狗：</p>
    <ul>
      <li v-for="(item,i) in loveArr" :key="i">{{item}} </li>
    </ul>
  </div>
</template>

<script>
import Dog from './components/Zy3.vue'
export default {
  components:{
    Dog
  },
  data() {
    return {
      list: [
        {
          dogImgUrl: 'https://img2.baidu.com/it/u=3172453358,3920649113&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=432',
          dogName: '博美',
        },
        {
          dogImgUrl: 'https://img1.baidu.com/it/u=2900244284,1975979104&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=484',
          dogName: '泰迪',
        },
        {
          dogImgUrl: 'https://img2.baidu.com/it/u=1699260592,4255381867&fm=253&fmt=auto&app=120&f=JPEG?w=940&h=702',
          dogName: '金毛',
        },
        {
          dogImgUrl: 'https://img1.baidu.com/it/u=833611674,3891638365&fm=253&fmt=auto&app=138&f=JPEG?w=580&h=386',
          dogName: '哈士奇',
        },
        {
          dogImgUrl: 'https://img0.baidu.com/it/u=3956177236,550531206&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
          dogName: '阿拉斯加',
        },
        {
          dogImgUrl: 'https://img2.baidu.com/it/u=89054294,1130291491&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=442',
          dogName: '萨摩耶',
        },
      ],
      loveArr:[]
    }
  },
  methods:{
    loveDog(name) {
      console.log(name);
      this.loveArr.push(name)
    }
  }
}
</script>

<style>

</style>